<template>
  <kb-scroll-view>
    <div>
      <h1>不直接使用 number-key-board</h1>
      <p>不使用NumberKeyboard</p>
      <kb-input
        v-model="mixValue"
        :inputProps="{
          placeholder: 'max length 10',
          maxLength: 10,
          type: 'int',
        }"
      />
      <p>input props maxLength</p>
      <kb-input
        v-model="value1"
        :inputProps="{ placeholder: 'max length 10', maxLength: 10 }"
        :keyBoardProps="{ compName: 'numberKeyBoard' }"
      />
      <p>自带标题</p>
      <kb-input
        v-model="value2"
        :inputProps="{ placeholder: 'max length 10', maxLength: 10 }"
        :keyBoardProps="{ compName: 'numberKeyBoard', title: '自带标题' }"
      />

      <p>自定义键盘</p>
      <kb-input
        v-model="value3"
        :inputProps="{ placeholder: 'max length 10', maxLength: 10 }"
        :keyBoardProps="{
          compName: 'numberKeyBoard',
          theme: 'custom',
          extrakey: ['00', '.'],
        }"
      />
      <p>身份证</p>
      <kb-input
        v-model="value4"
        :inputProps="{ placeholder: 'max length 10', maxLength: 10 }"
        :keyBoardProps="{
          compName: 'numberKeyBoard',
          extraKey: 'X',
          closeButtonText: '完成',
        }"
      />
      <div style="height: 300px"></div>
      <p>随机排序</p>
      <kb-input
        v-model="value5"
        :inputProps="{ placeholder: 'max length 10', maxLength: 10 }"
        :keyBoardProps="{
          compName: 'numberKeyBoard',
          randomKeyOrder: true,
        }"
      />
      <kb-board />
    </div>
  </kb-scroll-view>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      mixValue: `123`,
      value1: "22",
      value2: "22",
      value3: "22",
      value4: "22",
      value5: "22",
      value6: "22",
      value7: "22",
    };
  },
  methods: {
    submitFn(val) {
      this.eventName = "submit";
    },
    showStatus(data) {
      console.log("监听键盘显示隐藏", data);
    },
    inputFn({ el, value }) {
      this.eventName = "input";
    },
    focusFn({ el, value }) {
      this.eventName = "focus";
    },
    blurFn({ el, value }) {
      this.eventName = "blur";
    },
  },
};
</script>

<style>
p {
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>
